<!--
//
// Index.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/14.
//
-->
<template>
    <div class="Index">
        <!-- 筛选区 -->
        <table-search-bar :config="requestBodyConfig" :model="requestBody" :reset="getSearchReset" title="数据统计" @search="searchClicked" />
        <!-- 内容 -->
        <div class="container">
            <vxe-table ref="VXETable" :column-config="{ resizable: false}" show-footer :footer-method="footerMethod" :data="state.list" :loading="state.isLoading" :radio-config="{trigger: 'row', highlight: true}" :row-config="{isCurrent: true, isHover: true, keyField: 'id'}" :tree-config="{childrenField: 'children', reserve: true}" border round show-overflow size="small" @current-change="() => {}" @radio-change="() => {}" >
                <template #empty>
                    <el-empty :image-size="100" />
                </template>
                <vxe-column title="#" type="seq" width="50" />
                <vxe-column align="left" field="functionName" min-width="120" title="功能项"></vxe-column>
                <vxe-column field="市直属" title="市直属" min-width="100"></vxe-column>
                <vxe-column field="东港区" title="东港区" min-width="100"></vxe-column>
                <vxe-column field="岚山区" title="岚山区" min-width="100"></vxe-column>
                <vxe-column field="五莲县" title="五莲县" min-width="100"></vxe-column>
                <vxe-column field="莒县" title="莒县" min-width="100"></vxe-column>
                <vxe-column field="total" title="合计" min-width="100"></vxe-column>
            </vxe-table>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import * as api from "./api.js"

const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();
const containerHeight = computed(() => store.getters.containerHeight)

const {$message, $dayjs} = window;
// 当前页面权限
const permission = {

};

// 表单
const editForm = ref();

// 响应式数据
const state = reactive({
    list: [],
    isLoading: false
});
// 过滤器
const filters = computed(() => {
    return {
        dateFilter(val) {
            return $dayjs(val).format("YYYY-MM-DD HH:mm:ss")
        }
    }
})

/**
 * 合计行
 */
function footerMethod({columns, data}) {
    let szs = 0; // 市直属
    let dgq = 0; // 东港区
    let lsq = 0; // 岚山区
    let wlx = 0; // 五莲县
    let jx = 0; // 莒县
    let total = 0; // 每行合计
    data.map(item => {
        szs += parseInt(item["市直属"])
        dgq += parseInt(item["东港区"])
        lsq += parseInt(item["岚山区"])
        wlx += parseInt(item["五莲县"])
        jx += parseInt(item["莒县"])
        total += item.total
    })
    return [
        [
            "",
            "合计",
            szs,
            dgq,
            lsq,
            wlx,
            jx,
            total
        ]
    ]
}

// 请求query参数
const requestParams = reactive({
    orderCol: "id",
    isDesc: true,
    pageIndex: 1,
    pageSize: 20,
});
// 请求body参数
const requestBody = reactive({

})
// 筛选区域配置
const requestBodyConfig = reactive({
    startTime: {label: "开始时间", component: "el-date-picker-datetime", format: "YYYY-MM-DD HH:mm:ss"},
    endTime: {label: "结束时间", component: "el-date-picker-datetime", format: "YYYY-MM-DD HH:mm:ss", disabledDate: (date) => new Date(date).getTime() <= new Date(requestBody.startTime).getTime()},
})
// 分页配置
const pageConfig = reactive({
    total: 0,
    sizes: [10, 20, 50, 100, 200]
})

function getSearchReset(data) {
    data.startTime = $dayjs().format("YYYY-MM-DDT00:00:00");
    data.endTime = $dayjs().format("YYYY-MM-DDTHH:mm:ss");
    return data
}

// 点击搜索
function searchClicked() {
    console.log("搜索条件: ", requestBody)
    reload(true);
}

// 查询列表
async function loadList() {
    const params = {
        ...requestParams
    };
    const body = {
        ...requestBody
    };
    state.isLoading = true;
    const {success, data} = await api.GetAreaData( body);
    state.isLoading = false;
    if (!success) return 0;
    state.list = (data || []).map(item => {
        item.total = parseInt(item["市直属"]) + parseInt(item["东港区"]) + parseInt(item["岚山区"]) + parseInt(item["五莲县"]) + parseInt(item["莒县"]);
        return item;
    });
}
// 刷新
function reload(re) {
    if (re) requestParams.pageIndex = 1;
    loadList()
}

onMounted(() => {
    requestBody.endTime = $dayjs().format("YYYY-MM-DDTHH:mm:ss")
    requestBody.startTime = $dayjs().format("YYYY-MM-DDT00:00:00")
    loadList()
})
</script>

<style lang="scss" scoped>
.Index {
    margin: 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;

    .container {
        padding: 10px;
        background: #fff;
        margin-top: 10px;
        box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.1);
    }
}
</style>
